<template>
    <div class="equipListslot">
        <appFrame :selected="1" leftText="设备" :showBottom="equipConMainEquipListDisplayNone" style="position: relative;">
            <div id="equipLists">
                <aside class="equipList" :class="{ displayNone: !equipConMainEquipListDisplayNone }">
                    <div class="equipList_header">
                        <div class="searchEquipSide" :class="{ searchEquipSide_active: inputStyle }">
                            <el-input v-model="searchEquipSideCon" :clearable="true" :placeholder="$t('equipList.inputSearchEquip')" @keyup.enter.native="onSearchSide" @input="deviceSearchChange" @blur="() => (showBottom = true)">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </div>
                    </div>
                    <div class="equipList_main" v-loading="nodeLoad">
                        <span v-if="!haveData && !nodeLoad" class="promptResults flex-center">
                            {{ $t(noData) }}
                        </span>
                        <!-- <dynamicMenu :dataList="equipList" :selectedMode="1" isPage="equipInfoPage" :getItem="getItem">
                        </dynamicMenu> -->
                        <!-- getItem(function):点击事件；show-count(bool):展示设备数量 ;show-status(bool):展示设备状态-->
                        <myTree iconClass="iconfont icongw-icon-biaoti-xiala" :data="equipList" nodeKey="key" @current-change="getItem" :showNumber="100" :height="100" show-count show-status defaultExpandAll></myTree>
                    </div>
                </aside>

                <section class="equipCon_main" :class="{ displayNone: equipConMainEquipListDisplayNone }">
                    <nav class="equipCon_nav">
                        <header class="equipConNm">
                            <i class="toBack iconfont icongw-icon-fanghui" @click="toEquipList"></i>
                            <span class="appShow">{{ equipYcAndYxNo }} &nbsp;&nbsp; {{ equipConNm }}</span>
                            <div style="width: 18px"></div>
                        </header>
                        <!-- <p :title="equipConNm">
                            <i :class="returnStatus(equipConState)" class="iconfont icondian appDisplayNone" v-if="equipConNm != ''"></i>
                        </p> -->
                        <div class="tab_btn">
                            <div @click="onTabNav(1)" class="tabItem" :class="{ onTabNavClass: tabNavNumber == 1 }">
                                <div>
                                    {{ $t("equipList.mainHeaderTabName.ycNm") }}({{ stationNumber.ycNum }})
                                </div>
                            </div>
                            <div @click="onTabNav(2)" class="tabItem" :class="{ onTabNavClass: tabNavNumber == 2 }">
                                <div>
                                    {{ $t("equipList.mainHeaderTabName.yxNm") }}({{ stationNumber.yxNum }})
                                </div>
                            </div>
                            <div @click="onTabNav(3)" class="tabItem" :class="{ onTabNavClass: tabNavNumber == 3 }">
                                <div>
                                    {{ $t("equipList.mainHeaderTabName.setNm") }}({{ stationNumber.setNum }})
                                </div>
                            </div>
                        </div>
                        <aside class="main_search" :class="{ searchEquipMain_active: inputStyleMain }">
                            <el-input :clearable="true" v-model="mainSearchCon" :placeholder="$t('equipList.inputSearchProperty')" @change="onSearchHeaderX()" @keyup.enter.native="onSearchHeader" @input="onSearchHeaderChange">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </aside>
                    </nav>

                    <section class="equipment_list">
                        <div class="list_link" id="elTable" :class="{ 'set-box': equipSetShow }">
                            <el-table v-show="ycShow" :data="tableDataYc" :height="tableHeight" v-loading="loading" class="pcDisplayNone" ref="tableYc">
                                <template slot="empty">
                                    <div class="noDataTips" v-if="!loading"></div>
                                    <div v-else></div>
                                </template>
                                <el-table-column :label="$t('equipList.appTable[0]')" :key="17" width="160">
                                    <template slot-scope="scope">
                                        <span class="yd" :class="scope.row.isAlarm"></span>
                                        <span class="appYcNo">{{ scope.row.ycNo }}</span>
                                        <span class="appYcName">{{ scope.row.ycNm }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" :show-overflow-tooltip="true" :label="$t('equipList.appTable[1]')" :key="15">
                                    <template slot-scope="scope">
                                        <span class="value" :class="scope.row.isAlarm">
                                            {{ scope.row.value }}{{ scope.row.unit }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('equipList.appTable[2]')" width="80">
                                    <template slot="header" slot-scope="scope">
                                        <el-dropdown trigger="click" @command="switchCurve" placement="bottom">
                                            <span class="el-dropdown-link">
                                                {{ curveType.name }}<i class="el-icon-caret-bottom"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item command="1" :class="{active: curveType.name == '历史'}">历史</el-dropdown-item>
                                                <el-dropdown-item command="2" :class="{active: curveType.name == '实时'}">实时</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </template>
                                    <template slot-scope="scope">
                                        <div class="qx">
                                            <i class="iconfont iconquxian" @click="curveType.func(scope.row, 'C')"></i>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-table v-show="yxShow" :data="tableDataYx" :height="tableHeight" v-loading="loading" class="pcDisplayNone" ref="tableYx">
                                <template slot="empty">
                                    <div class="noDataTips" v-if="!loading"></div>
                                    <div v-else></div>
                                </template>
                                <el-table-column :label="$t('equipList.appTable[6]')" :key="17" width="160">
                                    <template slot-scope="scope">
                                        <span class="yd" :class="scope.row.equipState"></span>
                                        <span class="appYcNo">{{ scope.row.yxNo }}</span>
                                        <span class="appYcName">{{ scope.row.yxNm }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" :show-overflow-tooltip="true" :label="$t('equipList.appTable[1]')" :key="15">
                                    <template slot-scope="scope">
                                        <span class="value" :class="scope.row.equipState">
                                            <span>{{ scope.row.value }}</span>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('equipList.appTable[2]')" width="80">
                                    <template slot="header" slot-scope="scope">
                                        <span>实时</span>
                                        <!-- <el-dropdown trigger="click" @command="switchCurve" placement="bottom">
                                            <span class="el-dropdown-link">
                                                {{ curveType.name }}<i class="el-icon-caret-bottom"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item command="1">历史</el-dropdown-item>
                                                <el-dropdown-item command="2">实时</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown> -->
                                    </template>
                                    <template slot-scope="scope">
                                        <div class="qx">
                                            <i class="iconfont iconquxian" @click="curveType.func(scope.row, 'X')"></i>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 设置 -->
                            <div class="setList" v-show="equipSetShow" v-loadmore='loadmore' v-loading="loading">
                                <ul  v-show="equipSetShow && !loading">
                                    <li class="link_set iconfont icongw-icon-shezhi-gengduo" :title="item.setNm" v-for="(item, i) in tableDataSet" :key="'item.setNo' + i" @click="onSetOperate(0, item)">
                                        <span>{{ item.setNm }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <!-- 分页 -->
                    <div class="anologueEquipPaging" v-show="false">
                        <el-pagination small background @size-change="handleSizeChangeRight" @current-change="handleCurrentChangeRight" :pager-count="7" :page-sizes="[15, 25, 50, 100]" :page-size="25" layout="sizes, prev, pager, next, jumper" :total="totalRight" ref="pagination">
                        </el-pagination>
                    </div>
                </section>

                <!-- 实时视频 -->
                <el-dialog class="video-main" :visible.sync="videoShow" @close="onCloseCurve" :close-on-click-modal="false" center>
                    <GWVideo :GWVideoValue="videoValue" class="primary-icon" @click.native="onCloseVideo()">
                    </GWVideo>
                </el-dialog>
                <!-- 实时曲线 -->
                <el-dialog class="historyEchar" :title="`${$t('equipList.curve.curve')}：${equipConNm} ${equipChartNm}`" :close-on-click-modal="true" :visible.sync="curveShowCurve" @close="onCloseCurve" center>
                    <div class="las_li" v-if="curveShow">
                        <!-- <p class="las_li_title">
                            <span :title="equipConNm + ' · ' + equipChartNm">
                                {{ $t("equipList.curve.curve") }}：{{ equipConNm }} ·
                                {{ equipChartNm }}
                            </span>
                        </p> -->
                        <aside class="curve">
                            <div id="containerE"></div>
                            <!-- <span class="shuiYin"></span> -->
                        </aside>
                    </div>
                </el-dialog>

                <!-- 历史曲线 -->
                <el-dialog class="historyEchar" :title="`${$t('equipList.curve.history')}：${equipConNm} ${equipChartNm}`" :close-on-click-modal="true" :visible.sync="curveShowCurveHistory" @close="onCloseCurve" center>
                    <!-- <p class="title">
                        {{ $t("equipList.curve.history") }}：{{ equipConNm }} ·
                        {{ equipChartNm }}
                    </p> -->
                    <div class="las_li_history" v-if="curveShowHistory">
                        <aside class="curve">
                            <div class="header_time">
                                <div class="appDisplayNone">
                                    <div class="timepicker">
                                        <el-date-picker class="input-class" v-model="chartHistoryTime" size="mini" type="datetimerange" :picker-options="pickerOptions" range-separator="-" :start-placeholder="$t('equipList.mesTime[0]')" :end-placeholder="$t('equipList.mesTime[1]')" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :default-time="defaultTime" @change="checkTime" align="left">
                                        </el-date-picker>
                                        <span class="bottom_cx" @click="onInquire()">
                                            <span>{{ $t("publics.button.search") }}</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="pcDisplayNone">
                                    <div class="timepicker">
                                        <timeSelect v-model="appStartTimeValue" @change="appStartTime" :placeholder="$t('equipList.mesTime[0]')"></timeSelect>
                                        <!-- <el-date-picker :clearable="false" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appStartTime" v-model="appStartTimeValue" type="datetime" :placeholder="$t('equipList.mesTime[0]')"></el-date-picker> -->
                                        <div class="separator">-</div>
                                        <timeSelect :prefix="'iconfont'" v-model="appEndTimeValue" @change="appEndTime" :placeholder="$t('equipList.mesTime[1]')"></timeSelect>
                                        <!-- <el-date-picker :clearable="false" prefix-icon="iconfont" default-time="[23:59:59]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appEndTime" v-model="appEndTimeValue" type="datetime" :placeholder="$t('equipList.mesTime[1]')"></el-date-picker> -->
                                    </div>
                                </div>
                            </div>
                            <div class="history_box">
                                <!-- <el-table v-if="equipHistoryList === 0" v-loading="loadingHistory" :data="equipHistory">
                            </el-table> -->
                                <div id="historyData"></div>
                            </div>
                        </aside>
                    </div>
                </el-dialog>

                <el-dialog :title="$t('equipList.titles[0]')" :visible.sync="showExportTypeSelect" class="exportDialog exportTypeSelect" width="400px" center>
                    <el-row>
                        <el-col :span="6" class="label">
                            <span class="title">
                                {{ $t("equipList.titles[1]") }}
                            </span>
                            <el-popover placement="bottom" trigger="hover" popper-class="conditionAnalysePopper">
                                <div class="conditionAnalyse">
                                    <el-row>
                                        <el-col :span="6"> {{ $t(`equipList.exportType[0]`) }}: </el-col>
                                        <el-col :span="18">
                                            {{ $t(`equipList.exportDeclar[0]`) }}
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="6"> {{ $t(`equipList.exportType[1]`) }}: </el-col>
                                        <el-col :span="18">
                                            {{ $t(`equipList.exportDeclar[1]`) }}
                                        </el-col>
                                    </el-row>
                                </div>
                                <span slot="reference" class="analysis">
                                    <i class="el-icon-question"></i>
                                </span>
                            </el-popover>
                        </el-col>
                        <el-col :span="18">
                            <el-select v-model="isMerge" placeholder="请选择">
                                <el-option v-for="item in exportTypeOption" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="showExportTypeSelect = false" size="small">
                            {{ $t("publics.button.cancel") }}
                        </el-button>
                        <el-button type="primary" @click="confirmExportCurve" size="small">
                            {{ $t("publics.button.confirm") }}
                        </el-button>
                    </span>
                </el-dialog>
            </div>
        </appFrame>
    </div>
</template>
<script>
import equipListsJs from './js/EquipListsJs';
export default equipListsJs;
</script>
<style lang="scss" src="./css/equipLists.scss" scoped></style>
